<template>
    <div class="grade-manager-card card-box">
        <h5 class="card-title">
            <el-icon size="20" color="#F06423"><Setting /></el-icon>
            {{ $t('grade_manager.tit') }}
        </h5>
        <div class="card-text">
            <el-menu :default-active="activeIndex" :default-openeds="openedMenus" v-if="menuReady">
                <el-sub-menu index="1">
                    <template #title>
                        <span>{{ $t('grade_manager.menu_1') }}</span>
                    </template>
                    <el-menu-item index="1-1" @click="goPage(`/console/course/${courseId}/grade`)">
                        <el-icon color="#4c4c4c" size="16"><DataLine /></el-icon>
                        <span>{{ $t('grade_manager.menu_1_1') }}</span>
                    </el-menu-item>
                    <el-menu-item index="1-2" @click="goPage(`/console/course/${courseId}/grade/user`)">
                        <el-icon color="#4c4c4c" size="16"><DataAnalysis /></el-icon>
                        <span>{{ $t('grade_manager.menu_1_2') }}</span>
                    </el-menu-item>
                </el-sub-menu>
            </el-menu>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { computed, onMounted, ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'

import { goPage } from '@/utils/global'

const route = useRoute()
const router = useRouter()
const courseId = computed(() => Number(route.params.courseId))
const menuReady = ref(false)

const activeIndex = ref('1')
const openedMenus = ref(['1'])
// 建立路由路径与菜单index的映射关系
const routeToMenuMap: { [key: string]: string } = {
    grade: '1-1',
    gradeUser: '1-2',
}
// 根据当前路由设置激活状态和展开菜单
const setMenuState = async () => {
    const menuIndex = routeToMenuMap[route.name?.toString() || '']
    if (!menuIndex) return

    activeIndex.value = menuIndex

    // 设置需要展开的菜单（所有父级菜单）
    const segments = menuIndex.split('-')
    const parents = []
    for (let i = 1; i < segments.length; i++) {
        parents.push(segments.slice(0, i).join('-'))
    }
    openedMenus.value = parents
}

// 路由变化时更新
watch(() => route.path, setMenuState)

onMounted(() => {
    setMenuState()
    setTimeout(() => {
        menuReady.value = true
    }, 50)
})
</script>

<style lang="less" scoped>
.el-menu {
    --el-menu-bg-color: transparent; // 背景色
    --el-menu-hover-bg-color: transparent; // hover时的行背景色
    --el-menu-base-level-padding: 1px;
    --el-menu-level-padding: 12px; // 左右内边距
    --el-menu-item-font-size: 15px; // 字体大小
    --el-menu-item-height: 25px; // 一级导航行高
    --el-menu-sub-item-height: 25px; // 二级导航行高

    border-right: none;

    .el-sub-menu {
        :deep(.el-menu) {
            padding: 4px 0;
        }

        :deep(.el-sub-menu__title) {
            flex-direction: row-reverse;
            justify-content: flex-end;

            .el-sub-menu__icon-arrow {
                margin-right: 6px;
                margin-top: 0;
                position: static;
                transform: rotate(-90deg) !important;
            }
        }

        &.is-opened {
            & > :deep(.el-sub-menu__title) {
                .el-sub-menu__icon-arrow {
                    transform: rotate(0) !important;
                }
            }
        }
    }
}
</style>
